<script setup lang='ts'>
import { getCollectionListByUIDService } from '@/api/collection'
import {useUserStore} from '@/stores/user'
import { useRouter } from 'vue-router';

const router = useRouter()

const userStore = useUserStore()

const handleClick = () => {
    console.log('click')
}

const tableData = ref([
    {
        id: 0,
        uid: '1',
        birdId: 0,
        birdUrl: 'https://www.baidu.com'
    }
])

//调用后台接口根据uid获取收藏列表
const getCollectionListByUID = async () => {
    
    let result = await getCollectionListByUIDService(userStore.user.uid)

    if(result.code == 200){

        tableData.value = result.data

    }else{
        ElMessage.error(result.msg ? result.msg : '获取收藏列表失败')
    }

}
getCollectionListByUID()

//点击详细按钮跳转到对应的鸟类页面
const toDetail = (row) => {
    console.log(row)
    //跳转到对应的鸟类页面
    router.push('/home/birdDetail/' + row.birdId)
}

</script>

<template>
    <div class="container">
        <el-table :data="tableData" style="width: 100%">
            <el-table-column fixed prop="id" label="Id" width="60" />
            <!-- TODO 这里只展示鸟类id和url有点奇怪，后续考虑加入鸟类名称，需要修改数据库以及添加收藏接口脚本 -->
            <!-- <el-table-column prop="uid" label="UID" width="120" /> -->
            <el-table-column prop="birdId" label="BirdId" width="120" />
            <el-table-column prop="birdUrl" label="BirdUrl" width="120" />
            <el-table-column fixed="right" label="Operations" width="120">
                <template #default="{ row }">
                    <el-button type="primary" size="small" @click="toDetail(row)" >详细页面</el-button>
                    <!-- <el-button link type="primary" size="small" @click="showEditDialog(row)">编辑</el-button> -->
                    <!-- <el-button link type="primary" size="small" @click="showDeleteDialog(row)">删除</el-button> -->
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<style scoped>
.container {
    display: flex;
    justify-content: center;
    /* align-items: center; */
    margin: 10px;
    padding: 10px;
    width: 100%;
    height: 100%;
}
</style>